<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>命名路由</title>
    <script src="vue.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>

    <div id="app">
        <h1>Named Views</h1>
        <router-view></router-view>
    </div>
    <script>

        const menulist = {
            template: `<div>
                            <router-link to="/page1">menu1</router-link>
                            <router-link to="/page2">menu2</router-link>
                        </div>`
        }
        const userSetting = {
            template: `<div>
                            <h2>userSetting</h2>
                            <menulist />
                            <router-view></router-view>
                            <router-view name="child2"></router-view>
                       </div>
                        `,
            components: { menulist }
        }
        const page1 = {
            template: `<div>page1</div>`
        }
        const page2 = {
            template: `<div>
                            page2
                       </div>
                        `
        }

        const child1 = {
            template: `<div>child1</div>`
        }
        const child2 = {
            template: `<div>child2</div>`
        }
        const routes = [
            {path:'/', component:userSetting, children: [
                    {path: 'page1', component: page1},
                    {path:'page2', components: { // 注意这里的组件英文用复数
                            default: child1, // 非命名的用child1
                            child2: child2   // 命名则用child2
                        }
                    }
                ]}
        ]
        const router = new VueRouter({
            routes
        })
        const app = new Vue({
            el: '#app',
            router
        })


    </script>
</body>
</html>